<template>
  <div class="box">
    <el-header class="atg-header">
      <span class="title" style="padding: 20px">平台券</span>
      <span style="font-size:12px; color:#43425D;"
        >说明：平台券为精准科技提供的第三方优惠券，申请后通过平台审核即可进行使用</span
      >
    </el-header>

    <!-- 搜索区域 -->
    <div class="searchContent">
      <el-form :inline="true" :model="couponsList" class="demo-form-inline">
        <el-form-item>
          <el-input
            clearable
            v-model="listQuery.couponName"
            placeholder="请输入优惠券名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            clearable
            v-model="listQuery.brandName"
            remote
            reserve-keyword
            placeholder="品牌"
            :remote-method="remoteMethod"
            style="width: 180px;"
            :loading="loading"
            clear
          >
            <el-option
              v-for="item in carModelList"
              :key="item['_id']"
              :label="item['_id']"
              :value="item['_id']"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmitSearch"
            size="small"
            class="searchBtn"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="content">
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
        style="margin-left: 20px; width:100%"
      >
        <el-tab-pane label="全部" name="allCard"></el-tab-pane>
        <el-tab-pane label="折扣券" name="discount"></el-tab-pane>
        <el-tab-pane label="直抵券" name="through"></el-tab-pane>
        <el-tab-pane label="兑换券" name="exchange"></el-tab-pane>
        <el-tab-pane label="满减券" name="fullreduction"></el-tab-pane>
      </el-tabs>

      <!-- 全部券码 -->
      <div class="allContent">
        <div
          class="coupons_total"
          v-for="(item, index) in couponsList"
          :key="index"
        >
          <div
            v-if="item.couponState == '已发布'"
            :class="[
              item.couponType == '折扣券'
                ? 'discount_coupons'
                : item.couponType == '直抵券'
                ? 'through_coupons'
                : item.couponType == '满减券'
                ? 'fullreduction_coupons'
                : 'exchange_coupons'
            ]"
          >
            <div class="discount_left" @click="goDetails(item.id)">
              <div class="discount_logo_name">
                <p class="discount_logo">
                  <img
                    :src="item.brandLogo"
                    alt
                    style="width:30px;height:30px;border-radius: 50%;"
                  />
                </p>
                <span>{{ item.brandName }}</span>
              </div>
              <div class="discount_title" style="cursor:pointer">
                {{ item.couponName }}
              </div>
              <div class="available_stock">
                可用库存：
                <span>
                  {{
                    item.couponResult == null ? "0" : item.couponResult.stockNum
                  }} </span
                >张
              </div>
              <div class="effective_time">
                有效期：
                <span>{{ item.failureTime | filterTime }}</span
                >之前
              </div>
            </div>

            <!-- 直抵券 -->
            <div
              class="through_right"
              @click="applyUse(item.id,item.stockNum)"
              v-if="item.couponType == '直抵券'"
            >
              <el-tooltip placement="top">
                <div slot="content">
                  <p>
                    ￥{{
                      item.couponValues && item.couponValues.length > 0
                        ? item.couponValues["0"]
                        : 0
                    }}
                  </p>
                </div>
                <p>
                  ￥{{
                    item.couponValues && item.couponValues.length > 0
                      ? item.couponValues["0"]
                      : 0
                  }}
                </p>
              </el-tooltip>

              <img
                v-if="item.params == true"
                src="../../assets/images/coupons/useing.png"
                alt
              />
               <div :class="item.stockNum ? 'apply_use_through' : 'apply_use_through_disabled' "  >申请使用</div>
            </div>

            <!-- 折扣券 -->
            <div
              class="discount_right"
              @click="applyUse(item.id,item.stockNum)"
              v-else-if="item.couponType == '折扣券'"
            >
              <el-tooltip placement="top">
                <div slot="content">
                  <p>
                    {{
                      item.couponValues && item.couponValues.length > 0
                        ? item.couponValues["0"]
                        : 0
                    }}折
                    <span>券</span>
                  </p>
                </div>
                <p>
                  {{
                    item.couponValues && item.couponValues.length > 0
                      ? item.couponValues["0"]
                      : 0
                  }}折
                  <span>券</span>
                </p>
              </el-tooltip>

              <img
                v-if="item.params == true"
                src="../../assets/images/coupons/useing.png"
                alt
              />
              <div  :class="item.stockNum ? 'apply_use' : 'apply_use_disabled' ">申请使用</div>
            </div>

            <!-- 满减券 -->
            <div
              class="fullreduction_right"
              @click="applyUse(item.id,item.stockNum)"
              v-else-if="item.couponType == '满减券'"
            >
              <div>
                <el-tooltip placement="top">
                  <div slot="content">
                    <strong>
                      满{{
                        item.couponValues && item.couponValues.length > 0
                          ? item.couponValues["0"]
                          : 0
                      }}
                    </strong>
                    <p style="margin:0;padding:0;">
                      减{{
                        item.couponValues && item.couponValues.length > 0
                          ? item.couponValues["1"]
                          : 0
                      }}
                    </p>
                  </div>
                  <div style="margin:0;padding:0;">
                    <strong style="display:block;margin-top:20px;">
                      满{{
                        item.couponValues && item.couponValues.length > 0
                          ? item.couponValues["0"]
                          : 0
                      }}
                    </strong>
                    <p style="margin:0;padding:0;">
                      减{{
                        item.couponValues && item.couponValues.length > 0
                          ? item.couponValues["1"]
                          : 0
                      }}
                    </p>
                  </div>
                </el-tooltip>

                <img
                  v-if="item.params == true"
                  src="../../assets/images/coupons/useing.png"
                  alt
                />
                
              </div>
               <div :class="item.stockNum ? 'apply_use_fullreduction' : 'apply_use_fullreduction_disabled' ">申请使用</div>
            </div>

            <!-- 兑换券 -->
            <div
              class="exchange_right"
              @click="applyUse(item.id,item.stockNum)"
              v-else-if="item.couponType == '兑换券'"
            >
              <div style="margin-top:10px;">
                <img
                  v-if="item.params == true"
                  src="../../assets/images/coupons/useing.png"
                  alt
                />
                <el-tooltip placement="top">
                  <div slot="content">
                    <strong>
                      {{
                        item.couponValues && item.couponValues.length > 0
                          ? item.couponValues["0"]
                          : 0
                      }}
                    </strong>
                  </div>
                  <div style="margin:0;padding:0;">
                    <strong class="exchangeStrong">
                      {{
                        item.couponValues && item.couponValues.length > 0
                          ? item.couponValues["0"]
                          : 0
                      }}
                    </strong>
                  </div>
                </el-tooltip>

                <p style="margin:0px 0 0 10px;padding:0;">兑换</p>

              </div>
               <div  :class="item.stockNum ? 'apply_use_exchange' : 'apply_use_exchange_disabled' ">申请使用</div>
            </div>
          </div>
        </div>

        <!-- 申请使用弹框 -->
        <coupon-application
          :dialogFormVisible="dialogFormVisible"
          v-if="dialogFormVisible"
          :couponId="couponId"
          @cancel="cancel"
          @sureApply="sureApply"
          @close="close"
        ></coupon-application>
      </div>
    </div>

    <pagination
      v-if="total > 0"
      :total="total || couponsList.couponState == '已发布'"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getTicketInit"
    />
  </div>
</template>

<script>
import couponApplication from "../../views/platformTicket/components/couponApplication";
import Pagination from "@/components/Pagination";
import { mapGetters } from "vuex";
import {
  getCoupons,
  getBrandNames
} from "../../service/api/index";
import { parseTime } from "@/utils/index";
export default {
  data() {
    return {
      activeName: "allCard",
      listQuery: {
        couponName: "",
        couponType: "",
        couponState: 1,
        brandName: "",
        pageNum: 1,
        pageSize: 10
      },
      total: 0,

      formInline: {
        user: "",
        region: ""
      },
      dialogFormVisible: false,
      couponsList: [],
      loading: false,
      carModelList: [],
      couponId: ""
    };
  },
  filters: {
    filterTime(val) {
      return parseTime(val, "{y}-{m}-{d}");
    }
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  components: {
    Pagination,
    couponApplication
  },
  created() {
    this.getTicketInit();
    this.couponModelListAsync();
  },
  methods: {
    async getTicketInit() {
      const res = await getCoupons({
        ...this.listQuery
      });

      // this.couponsList = res.data.content;
      this.couponsList = res.data.content.map((item) => ({
        ...item,
        stockNum: item.couponResult ? item.couponResult.stockNum : "",
      }));
      console.log(this.couponsList)

      this.total = res.data.totalElements;
    },
    async couponModelListAsync() {
      let res = await getBrandNames();
      if (res.code == 0) {
        this.carModelList = res.data;
      }
    },

    onSubmitSearch() {
      this.listQuery.pageNum = 1;
      this.couponsList = [];
      this.getTicketInit();
    },
    goDetails(id) {
      this.$router.push({
        path: "/platformTicket/couponDetails",
        query: { couponId: id }
      });
    },
    applyUse(id,stockNum) {
      // console.log(this.couponsList.stockNum)
       if(stockNum == ''){
        this.$message({
          type: "error",
          message: "无可用库存"
        });
        return false
      }
      this.couponId = id;
      this.dialogFormVisible = true;
     
    },
    cancel(val) {
      this.dialogFormVisible = val;
    },
    close(val) {
      this.dialogFormVisible = val;
    },
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.carModelList = this.carModelData.filter(item => {
            if (item.value.indexOf(query) > -1) {
              return item;
            }
          });
        }, 200);
      } else {
        this.carModelList = this.carModelData;
      }
    },
    handleClick(e) {
      let couponType = "";
      if (e.label == "直抵券") {
        couponType = "0";
      } else if (e.label == "兑换券") {
        couponType = "1";
      } else if (e.label == "满减券") {
        couponType = "2";
      } else if (e.label == "折扣券") {
        couponType = "3";
      }

      this.listQuery.couponType = couponType;
      this.onSubmitSearch();
    },
    sureApply(val) {
      this.dialogFormVisible = val;
      this.getTicketInit();
    }
  }
};
</script>

<style lang="scss" scoped>

.apply_use_exchange{
     width: 69px;
  height: 32px;
  background-color: #3B86FF;
  border-radius: 4px;
  color:#fff;
  line-height: 32px;
  text-align: center;
  font-size: 12px;
  position: absolute;
  right: -1px;
  bottom: 10px;
}
.apply_use_exchange_disabled{
    width: 69px;
  height: 32px;
  background-color: #9facc0;
  border-radius: 4px;
  color:#fff;
  line-height: 32px;
  text-align: center;
  font-size: 12px;
  position: absolute;
  right: -1px;
  bottom: 10px;
}

.apply_use_fullreduction{
   width: 69px;
  height: 32px;
  background-color: #3B86FF;
  border-radius: 4px;
  color:#fff;
  line-height: 32px;
  text-align: center;
  font-size: 12px;
  position: absolute;
  right: 11px;
  bottom: 9px;
}
.apply_use_fullreduction_disabled{
  width: 69px;
  height: 32px;
  background-color: #9facc0;
  border-radius: 4px;
  color:#fff;
  line-height: 32px;
  text-align: center;
  font-size: 12px;
  position: absolute;
  right: 11px;
  bottom: 9px;
}

.apply_use_through{
  width: 69px;
  height: 32px;
  background-color: #3B86FF;
  border-radius: 4px;
  color:#fff;
  line-height: 32px;
  text-align: center;
  font-size: 12px;
  position: absolute;
  right: -3px;
  bottom: 10px;
}
.apply_use_through_disabled{
   width: 69px;
  height: 32px;
  background-color: #9facc0;
  border-radius: 4px;
  color:#fff;
  line-height: 32px;
  text-align: center;
  font-size: 12px;
  position: absolute;
  right: -3px;
  bottom: 10px;
}
.box{
  min-height: 80vh;
}
.content {
  width: 100%;
  min-height: 60vh;
}
.exchangeStrong {
  height: 25px;
  line-height: 25px;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 90%;
}
.exchange_right img {
  position: absolute;
  right: -17px;
  top: 3px;
}
.exchange_right strong {
  font-size: 14px;
  color: #43425d;
  font-weight: normal;
  margin-left: 8px;
}
.exchange_right p {
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ff7065;
  margin-left: 10px;
}

.exchange_left {
  position: absolute;
  left: 13px;
  top: 9px;
}
.exchange_right {
  position: absolute;
  right: 26px;
  top: 5px;
  width: 80px;
  height: 120px;
  cursor: pointer;
  text-align: center;
}
.exchange_coupons {
  width: 291px;
  height: 148px;
  background-image: url("../../assets/images/coupons/coupon4.png");
  position: relative;
}
.fullreduction_right img {
  position: absolute;
  right: -5px;
  top: 2px;
}
.fullreduction_right p {
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ff7065;
  display: -webkit-box;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 90%;
}
.fullreduction_right strong {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #43425d;
  padding-left: 7px;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 90%;
}
.fullreduction_right {
  position: absolute;
  right: 15px;
  top: 5px;
  width: 80px;
  height: 120px;
  text-align: left;
  padding-left: 10px;
  cursor: pointer;
}
.fullreduction_left {
  position: absolute;
  left: 13px;
  top: 9px;
}
.fullreduction_coupons {
  width: 291px;
  height: 148px;
  background-image: url("../../assets/images/coupons/coupon3.png");
  position: relative;
}
.through_right img {
  position: absolute;
  right: -22px;
  top: 2px;
}
.through_right p {
  font-size: 25px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ff7065;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 110%;
}
.through_right {
  position: absolute;
  right: 30px;
  top: 5px;
  width: 80px;
  height: 120px;
  text-align: center;
  cursor: pointer;
}
.through_left {
  position: absolute;
  left: 13px;
  top: 9px;
}
.through_coupons {
  width: 291px;
  height: 148px;
  background-image: url("../../assets/images/coupons/coupon2.png");
  position: relative;
}
.apply_use_disabled{
 position: absolute;
  right: 22px;
  bottom: -11px;
  width: 69px;
  height: 32px;
  background-color: #9facc0;
  border-radius: 4px;
  color:#fff;
  line-height: 32px;
  text-align: center;
  font-size: 12px;
}
.apply_use {
  position: absolute;
  right: 22px;
  bottom: -11px;
  width: 69px;
  height: 32px;
  background-color: #3B86FF;
  border-radius: 4px;
  color:#fff;
  line-height: 32px;
  text-align: center;
  font-size: 12px;

}
.discount_right img {
  position: absolute;
  right: 2px;
  top: 8px;
}
.discount_right p span {
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 25px;
  color: #ffbe00;
  margin-left: 3px;
}
.discount_right p {
  font-size: 25px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ff7065;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 90%;
}
.discount_right {
  position: absolute;
  right: 6px;
  top: 0px;
  width: 105px;
  height: 120px;
  text-align: center;
  cursor: pointer;
}
.effective_time {
  font-size: 12px;
  color: #43425d;
  margin-left: 13px;
}
.available_stock {
  font-size: 12px;
  color: #43425d;
  margin: 7px 0 7px 13px;
}
.discount_title,
.through_title,
.fullreduction_title,
.exchange_title {
  font-size: 15px;
  color: #3b86ff;
  margin-left: 13px;
  font-size: 14px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 90%;
}
.discount_logo_name span {
  height: 23px;
  line-height: 23px;
  font-size: 14px;
  margin: 13px 0 0 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 90%;
}
.through_logo_name span {
  height: 23px;
  line-height: 23px;
  font-size: 14px;
  margin: 13px 0 0 0;
}
.fullreduction_logo_name span {
  height: 23px;
  line-height: 23px;
  font-size: 14px;
  margin: 13px 0 0 0;
}
.exchange_logo_name span {
  height: 23px;
  line-height: 23px;
  font-size: 14px;
  margin: 13px 0 0 0;
}
.discount_logo,
.through_logo,
.fullreduction_logo,
.exchange_logo {
  width: 30px;
  height: 30px;
  // border: 1px solid #000;
  border-radius: 50%;
  margin: 13px 9px 10px 13px;
}
.discount_logo_name,
.through_logo_name,
.fullreduction_logo_name,
.exchange_logo_name {
  display: flex;
}
.discount_right {
  width: 105px;
  height: 100px;
}
.discount_left {
  width: 163px;
  height: 126px;
  position: absolute;
  left: 11px;
  top: 9px;
}
.discount_coupons {
  width: 291px;
  height: 148px;
  background-image: url("../../assets/images/coupons/coupon1.png");
  position: relative;
}
.allContent {
  min-width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.searchBtn {
  background-color: #43425d;
  border: 0;
  margin-bottom: 40px;
}

/deep/.el-tabs__item {
  width: 80px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  /* border: 1px solid #000; */
}

/deep/.el-tabs--card > .el-tabs__header .el-tabs__item {
  border-bottom: 1px solid #e9e9f0;
}
/deep/.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border: 1px solid #409eff;
}
/deep/.el-tabs--card > .el-tabs__header .el-tabs__item:last-child.is-active {
  border: 1px solid #409eff;
  border-radius: 0 4px 4px 0;
}
/deep/.el-tabs--card > .el-tabs__header .el-tabs__item:first-child.is-active {
  border: 1px solid #409eff;
  border-radius: 4px 0 0 4px;
}
/deep/.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border-radius: 4px;
}
/deep/.el-tabs--card > .el-tabs__header {
  border: 0;
}
.atg-header {
  line-height: 60px;
  border-bottom: 1px solid #e9e9f0;
}
.atg-header .title {
  font-weight: 600;
}
.el-button--small,
.el-button--small.is-round {
  padding: 9px 25px;
  border-radius: 5px;
}
/deep/.el-input__inner {
  height: 30px;
  line-height: 30px;
  padding: 0 5px;
  border-radius: 0;
  border-radius: 4px;
}
.searchContent {
  margin-top: 10px;
  margin-left: 20px;
}
</style>
